<template>
  <div id='shenhe'>
    <com-head :opacity='0'>升级审核</com-head>
    <div class="navimg"  @click="shownav"><img class="img" src="../assets/image/navall.png"></div>
    <div class="nav">
      <div class="box" :class="{active: active === '1'}" @click="active1">待审核</div>
      <div class="box" :class="{active: active === '2'}" @click="active2">已审核</div>
    </div>
    <!-- 待审核 -->
    <div class="message" v-for="(item,index) in message1" :key="index"  v-if="active === '1'">
        <div class="left">
            <p>申请人：{{item.user_id}}</p>
            <p>申请时间：{{item.create_time}}</p>
            <p>升级等级：{{item.rank}}</p>
            <p>打款金额：{{item.money}}</p>
        </div>
        <div class="right"><button @click="sureShenhe(item.id)">确定审核</button><button @click="mask=true">查看截图</button></div>
        <div class="mask" v-if="mask" @click="mask=false"><div class="img"><img :src="`http://${item.imgurl}`"></div></div>
    </div>
    <!-- 已审核 -->
    <div class="message" v-for="(item,index) in message2" :key="index"  v-if="active === '2'">
        <div class="left">
            <p>申请人：{{item.user_id}}</p>
            <p>申请时间：{{item.create_time}}</p>
            <p>升级等级：{{item.rank}}</p>
            <p>打款金额：{{item.money}}</p>
        </div>
        <div class="right">
            <p>已审核</p>
            <p>2018-11-20 11:30:20</p>
        </div>
    </div>
    <div class="alertmima"  v-if="mask1">
      <p>请输入二级密码</p>
      <input type="password" v-model="safepsw" placeholder="请输入二级密码">
      <button @click="surepsw">确定</button>
    </div>
    <div class="mask1" v-if="mask1"  @click="mask1=false"></div>
  </div>
</template>

<script>
export default {
  name: "shenhe",
  data() {
    return {
      mask: false,
      mask1: false,
      id: '',
      active: "0",
      safepsw: '',
      message1:[],
      message2:[],
    };
  },

  computed: {},

  created() {
    //待审核
    this.loading1();
    this.active = '1';
  },

  mounted() {},

  methods: {
    //待审核
    loading1() {
      this.axios
        .post("apiindex/sub_upgrade_view", {
          token: this.token(),
          type: '1'
        })
        .then(({ data }) => {
          
          if (data.code === "200") {
            this.message1 = data.data;
          } else if (data.code === "204") {
            this.$bus.$emit("toast", data.data);
          } else if (data.code === "205") {
            this.$bus.$emit("toast", '暂无数据');
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    //已审核
    loading2() {
      this.axios
        .post("apiindex/sub_upgrade_view", {
          token: this.token(),
          type: '2'
        })
        .then(({ data }) => {
          
          if (data.code === "200") {
            this.message2 = data.data;
          } else if (data.code === "204") {
            this.$bus.$emit("toast", data.data);
          } else if (data.code === "205") {
            this.$bus.$emit("toast", '暂无数据');
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    surepsw () {
      if (!this.safepsw) {
        this.$bus.$emit("toast", "请输入二级密码");
      } else {
        this.axios.post("apiindex/sub_upgrade", {
          token: this.token(),
          id: this.id,
          sale_code: this.safepsw,
        })
        .then(({ data }) => {
          
          if (data.code === "200") {
            this.active ='2';
            this.mask1 = false;
            this.$bus.$emit("toast", data.data);            
          } else if (data.code === "204") {
            this.mask1 = false;
            this.$bus.$emit("toast", data.data);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
      }
    },
    sureShenhe(id){
      this.mask1 = true;
      this.id = id;     
    },
    active1() {
      //待审核
      this.loading1();
      this.active = '1';
    },
    active2() {
      //已审核
      this.loading2();
      this.active = '2';
    },
    shownav() {
      this.$bus.$emit("navlist");
    }
  }
};
</script>
<style lang='scss'>
#shenhe {
  .icon-fanhui1 {
    display: none;
  }
  .navimg {
    width: 140px;
    height: 80px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    img {
      display: block;
      margin-left: 42px;
      margin-top: 25px;
      width: 43px;
      height: 33px;
    }
  }
  .nav {
    height: 96px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-bottom: 2px solid #ddd;
    color: #333333;
    .box {
      width: 100px;
      height: 96px;
      text-align: center;
      line-height: 96px;
      border-bottom: none;
    }
    .active {
      border-bottom: 6px solid #0a89ac;
      color: #0a89ac;
      box-sizing: border-box;
    }
  }
  .message {
    margin: 0px 32px;
    width: 686px;
    height: 234px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #ddd;
    font-size: 26px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
    line-height: 50px;
    .left {
      text-align: left;
    }
    .right {
      width: 196px;
      height: 150px;
      text-align: center;
      border-left: 2px solid #d8d8d8;
      button {
        margin: -12px 24px;
        width: 148px;
        height: 56px;
        background: rgba(184, 25, 25, 1);
        border-radius: 6px;
        font-size: 26px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
      }
      button:nth-of-type(1) {
        margin-top: 0px;
      }
      button:nth-of-type(2) {
        width: 108px;
        margin: 40px 44px;
        background: none;
        color: #555;
        border-bottom: 1Px solid #555;
        border-radius: 0px;

      }
    }
    .mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 50;
    background: rgba(0, 0, 0, 0.6);
    .img {
      width: 590px;
      min-height: 800px;
      position: absolute;
      top: 20%;
      left: 80px;
      text-align: center;
      overflow: hidden;
      img {
        width: 100%;
      }
    }
    }
  }
  .mask1 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 50;
    background: rgba(0, 0, 0, 0.6);
    }
     .alertmima {
      width: 590px;
      height: 350px;
      box-sizing: border-box;
      padding: 20px 40px;
      background: #ffffff;
      border-radius: 10px;
      position: absolute;
      top: 27%;
      left: 80px;
      text-align: center;
      z-index: 100;
      // background-color: red;
      p{
        line-height: 90px;
      }
      input{
        border: 1Px solid #ddd;
        padding-left: 10px;
        box-sizing: border-box;
        width: 90%;
        height: 80px;
        margin-bottom: 50px;
      }
    button {
          width: 400px;
          margin: 0 auto;
          height: 78px;
          line-height: 78px;
          color: #fff;
          font-size: 28px;
          border-radius: 39px;
          background: #054a5e;
          // @include bgChangeStyle();
        }
    }
}
</style>